<template>
    <!-- 渲染主页 -->
    <div>
        <div>
            <el-button @click="router.back()">返回主页</el-button>
        </div>

        <div
            style="font-size: 20px; font-weight: bold;color: red;text-decoration: underline;font-style: italic;margin-bottom: 20px;">
            这是主页
        </div>

        <div style="font-size: 30px;margin-bottom: 20px;">
            {{ a }} {{ b }}
        </div>

        <div style="margin-bottom: 20px;">
            {{ data.a }} {{ data.b }}
        </div>

        <div style="margin-bottom: 20px;">
            <!-- 双向绑定数据 -->
            <input v-model="data.a" />
        </div>

        <div style="margin-bottom: 20px;">
            <span style="color:red" v-if="data.name === '佩奇'">小猪佩奇</span>
            <span style="color: blue" v-if="data.name === '乔治'">小猪乔治</span>
            <span style="color: hotpink" v-else>小猪赵凯</span>
        </div>

        <div style="display: flex;margin-bottom: 30px;">
            <div @click="show(item)"
                style="width: 300px;height: 300px;margin-right: 20px;text-align: center;line-height: 300px;font-size: 30px;background-color: green;"
                v-for="item in data.arr">
                {{ item }}
            </div>

            <div>
                <select style="width: 200px;">
                    <option v-for="item in data.fruits">{{ item }}</option>
                </select>
            </div>

            <div>
                <select style="width: 100px;">
                    <option v-for="item in data.username">{{ item }}</option>
                </select>
            </div>
        </div>

        <div style="margin-bottom: 20px;">
            <!-- @,v-on:绑定事件 -->
            <button @click="click">功德+1</button>
        </div>

        <div style="margin-bottom: 30px;">
            <!-- v-bind:绑定样式 -->
            <div :style="data.box"></div>
            <div><img :src="data.img" alt=""></div>
        </div>

        <!-- onMounted 挂载完成,在页面完全加载后触发 -->

        <div style="margin:30px;">
            <!-- style里的color是字体颜色 -->
            <el-button @click="clickData" :style="{ color: 'blue' }">Default</el-button>
            <!-- color是背景颜色 -->
            <el-button type="primary">小明</el-button>
            <el-button type="success" plain>Success</el-button>
            <el-button type="info" :bg="false" text>赵凯</el-button>
            <el-button type="warning">Warning</el-button>
            <el-button type="danger">Danger</el-button>
        </div>

        <div style="margin:30px;">
            <el-icon :size="20">
                <Edit />
            </el-icon>

            <span style="margin-left: 30px;color:#666;">
                <el-icon size="20" color="#666" style="top: 4px;">
                    <View />
                </el-icon>100
            </span>

            <el-button type="danger" :icon="Delete" circle />

            <el-input v-model="data.a" style="width: 240px" placeholder="Type something" :prefix-icon="Search" />
        </div>

    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
// 在按钮,输入框里面使用图标需要单独导入图标
import { Delete, Search } from '@element-plus/icons-vue'
import router from '@/router'

//定义数据
const a = ref(1)
const b = ref("你好")
const data = reactive({
    id: router.currentRoute.value.query.id, // 获取路由传参
    name: router.currentRoute.value.query.name, 
    a: 123,
    b: "你好赵凯",
    c: 22222,
    arr: [4, 8, 3],
    fruits: ["苹果", "香蕉", "橘子"],
    username: ["赵凯", "佩奇", "乔治"],
    box: {
        width: "100px",
        height: "100px",
        backgroundColor: "green",
    },
    img: "https://www.baidu.com/img/flexible/logo/pc/result.png"
})

console.log("路由传参id:"+ data.id)
console.log("路由传参name:"+ data.name)
const show = (item) => {
    alert(item)
}
const clickData = () => {
    alert("当前使用的是ElementUI")
}
const click = () => {
    alert("功德+1")
}
onMounted(() => {
    console.log("页面加载完成")
})
</script>